<div class="row mt-30">
  <h2 class="mt-0">
    {{t "loggingPage.additional.header"}}
  </h2>

  <hr/>

  <div class="col span-5">
    <section class="additional-logging-configuration-content">
      <label>{{t "loggingPage.additional.fields.header"}}</label>
      <div class="mb-30">
        <p class="text-info text-small">{{t "loggingPage.additional.fields.helpText"}}</p>
        <FormKeyValue
          @addActionLabel="loggingPage.tags.addActionLabel"
          @initialMap={{model.outputTags}}
          @changed={{action (mut model.outputTags)}}
        />
      </div>

      {{#if (not-eq targetType "customTarget")}}
        <div class="row mb-30">
          <div class="col">
            <label class="acc-label" for="output-flush-interval">
              {{t "loggingPage.additional.flushInterval.label"}}
            </label>
            <div class="input-group">
              <InputInteger
                @min=1
                @value={{model.outputFlushInterval}}
                @class="form-control"
                id="output-flush-interval"
                @placeholder={{t "loggingPage.additional.flushInterval.placeholder"}}
                aria-describedby="basic-addon2"
              />
              <span class="input-group-addon bg-default" id="basic-addon2">
                {{t "loggingPage.additional.flushInterval.sec"}}
              </span>
            </div>
            <p class="text-info text-small mb-0">{{t "loggingPage.additional.flushInterval.helpText"}}</p>
          </div>
        </div>
      {{/if}}

      {{#if (eq pageScope "cluster")}}
        <div class="row">
          <label for="include-system-component">
            <Input
              @type="checkbox"
              class="form-control"
              id="include-system-component"
              @checked={{model.includeSystemComponent}}
            />
            {{t "loggingPage.additional.includeSystemComponent.label"}}
          </label>
        </div>
      {{/if}}

      <div class="row">
        <label for="enable-json-parsing">
          <Input
            @type="checkbox"
            class="form-control"
            id="enable-json-parsing"
            @checked={{loggingModel.enableJSONParsing}}
          />
          {{t "loggingPage.additional.jsonParsing.label"}}
        </label>
      </div>
    </section>
  </div>

  <div class="col span-7 logging-format">
    <Logging::CodeBlock
      @code={{logPreview}}
      @language="json"
    />
  </div>
</div>